// 表单中的输入框组件。
// 例子
/*
       <qm-field
            label="被访单位"
            v-model="company"
            required
            placeholder="请选择"
            arrow-direction="down"
            :is-link='true'
            readonly
          >
          </qm-field>
          以下为常用的值：
          label:标题名称
          v-model：输入框绑定的值
          placeholder：输入框默认显示的值
          required:	是否显示表单必填星号
          autosize:高度自适应
          arrow-direction:箭头方向
          readonly:是否只读
          is-link是否显示箭头
          border:是否显示内边框，默认值是true
          具体的其他参数和使用方法可以查看vant文档:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/field

*/
<template id='qm-field'>
  <van-field v-bind="$attrs" v-on="$listeners"  :style="qmradius" >
    <!-- 继承全部插槽 -->
    <template v-for="(index,name) in $slots" :slot="name">
      <slot :name="name">
      </slot>
    </template>
  </van-field>
</template>

<script>
import { Field } from "vant";
export default {
  components: {
    [Field.name]: Field,
  },
  props:{
    // 是否使用圆角
    radius:Number
  },
  computed:{
    qmradius(){
      return{
        'border-radius':this.radius?`calc(${this.radius}px * var(--ratio))`:'',
        'font-size':'15px'
      }
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .van-cell__right-icon {
  color: #ced6e0;

}
 /deep/ .van-field__label{
        color: #61677A;
        font-size: 15px;
}
/deep/ input.van-field__control::-webkit-input-placeholder {
      color: #b5bcca;
      font-size: 15px;
    }
// /deep/ .van-field__label {
//   // line-height: 36px;
//   margin-right: 29px;
// }

</style>
